<template>
  <div class="app-container">
    <div class="filter-container">
      <span>昵称：</span>
      <el-input
        v-model="paramOrder.orderSn"
        placeholder="请输入订单编号"
        style="width: 200px"
        class="filter-item"
      />
      <span class="leftMar">电话号：</span>
      <el-input
        v-model="paramOrder.addressee"
        placeholder="请输入收件人"
        style="width: 200px"
        class="filter-item"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="search"
      >
        搜索
      </el-button>
    </div>
    <el-table
      :data="list"
      v-loading="listLoading"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index }}</span>
        </template>
      </el-table-column>
      <el-table-column label="头像" align="center">
        <template slot-scope="{ row }">
          <el-image
            style="width: 100px; height: 100px; border-radius: 50%"
            :src="row.headImgUrl"
            fit="cover"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="昵称" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话号" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.phone || "无" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邀请人" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.inviteesId || "暂无" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="业务员" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.saleState == "NO" ? "否" : "是" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="openSaleMan(row)"
            >设为业务员</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      @close="clearForm"
      center
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        v-if="centerDialogVisible"
      >
        <el-form-item label="名字">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="提成比例%">
          <el-input v-model="form.commissionRatio" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSaleMan">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetUserList, SetSaleMan } from "@/api/user";
export default {
  data() {
    return {
      paramOrder: {
        //订单查询条件
        currPage: 1,
        pageSize: 10,
        nickname: "",
        phone: "",
      },
      value1: "",
      listLoading: false, //加载
      list: [], //数据
      form: {}, //添加业务员
      centerDialogVisible: false, //弹窗
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    //搜索
    search() {
      this.getUserList();
    },
    //获取用户列表
    getUserList() {
      GetUserList(this.paramOrder).then((res) => {
        this.list = res.data.data_list;
      });
    },
    //打开业务员弹窗
    openSaleMan(row) {
      this.centerDialogVisible = true;
      var { nickname, phone, id } = row;
      this.$set(this.form, "name", nickname);
      this.$set(this.form, "phone", phone);
      this.$set(this.form, "commissionRatio", 0);
      this.form.wxId = id;
      console.log(row);
    },
    //清除数据
    clearForm() {
      this.form = {};
    },
    //添加业务员
    addSaleMan() {
      SetSaleMan(this.form).then((res) => {
        if (res.code == 200) {
          this.$message.success("添加成功");
          this.centerDialogVisible = false;
          this.getUserList();
        }
      });
    },
  },
};
</script>
<style scoped>
.leftMar {
  margin-left: 8px;
}
.filter-container {
  margin-bottom: 10px;
}
</style>